<template>
    <div class="header">
        <el-row type="flex" align="middle" justify="center">
            <el-col :span="2">
                <img alt="" src="../assets/big-logo-alpha.png" />
            </el-col>
            <el-col :span="5">
                <span class="system-name">软件协会考试系统</span>
            </el-col>
            <el-col :span="2">
                <RouterLink class="router-link-active" to="/index/myexam">
                    <div class="my-exam">
                        <el-link>我的考试</el-link>
                    </div>
                </RouterLink>
            </el-col>
            <!-- <el-col :span="2">
                <RouterLink to="/index/history">
                    <div class="my-exam">
                        <el-link>历史成绩</el-link>
                    </div>
                </RouterLink>
            </el-col> -->
            <el-col :span="3">
                <RouterLink to="/index/examResult">
                    <div class="my-exam">
                        <el-link>考试排行榜</el-link>
                    </div>
                </RouterLink>
            </el-col>
            <el-col :span="3">
                <div class="current-user">当前用户: {{ userName }}</div>
            </el-col>
            <el-col :span="2">
                <el-button primary="default" @click="logout">退出登录</el-button>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import { useUserAuthStore } from "../stores/userStore";
import { ref } from "vue";

const useUserAuth = useUserAuthStore();

let userName = ref(sessionStorage.getItem('username'))

// 退出登录 先清空username和token再跳转到初始的登录页面
const logout = () => {
    useUserAuth.logout();
}

</script>

<style scoped lang="scss">
.header {
    height: auto;
    background-color: #f1f0ed;
    color: #333;

    img {
        width: 110px;
        height: 70px;
    }

    .system-name {
        font-size: 28px;
        font-weight: bold;
        margin-left: 20px;
    }

    .my-exam {
        height: 74px;
        width: auto;
        display: flex;
        justify-content: center;

        a {
            font-size: 20px;
        }
    }
}
</style>
